<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chat</title>
    <link rel="stylesheet" href="../../model/component.css">
</head>
<body>
<!--目录-->
<div class="catalog">
    <h2>目录</h2>
    <ul>
        <li>
            <p>常用聊天页面</p>
            <ul>
                <li><p><a href="#doc-1">目录格式</a></p></li>
                <li><p><a href="#sample-1">页面样例</a></p></li>
                <li><p><a href="#xml-1">页面xml</a></p></li>
                <li><p><a href="#detail-1">方法详解</a></p></li>
            </ul>
        </li>
    </ul>
</div>
<div id="doc-1">
    <h2>目录格式:</h2>
    <img src="img/doc_1.png" alt="">
</div>
<div id="sample-1">
    <h2>页面样例:</h2>
    <img src="img/xml_1.png" alt="">
</div>
<div id="xml-1">
    <h2>页面xml:</h2>
    <p>message-chat.xml</p>
    <xmp>
        <listview>
            <header>
                <title background="#ffffff" id="title" height="48">
                    <limg attr="48" click="document.finish()">img.back002.png</limg>
                    <cp font="15,#1a1717" val="document.arguments.otherName">对方的昵称</cp>
                    <!--<rimg>img.tel.png</rimg>-->
                </title>
            </header>
            <body refresh="
            if(document.chatNaive === ''){
                document.stop();
                return;
            }
            getAgent(document.chatNaive).invoke('upload',{page:-1}).then((res)=>{
                document.stop();
                document.adapter('chat_list').upload(res);
            });">
            <item id="chat_list">
                <chat image="this.getDocument().open('zn.message-chat-big_image.xml',{image:this.getItem().imgae})"
                      voice="media.listener(()=>{alert('播放结束')});media.play(this.getItem().url);"
                />
            </item>
            </body>
            <footer>
                <chat id="chatItem">
                    <limg click="
            document.voiceButton();document.$('chatItem').set('input','');
            if(document.$('chatItem').val().length>0){
                document.$('chatItem').set('rimg2','img.send_email.png');
            }else{
                document.$('chatItem').set('rimg2','img.add4.png');
            }
            " pass="img.key_word.png">img.luyin.png</limg>
                    <rimg click="
            document.changekeyword(0);
            if(document.$('chatItem').val().length>0){
                document.$('chatItem').set('rimg2','img.send_email.png');
            }else{
                document.$('chatItem').set('rimg2','img.add4.png');
            }
            ">img.smile2.png</rimg>
                    <rimg2 click="
            if(document.$('chatItem').val().length > 0){
                var data = {type:'text','content': document.$('chatItem').val()};
                document.sendMessage(data);
                document.$('chatItem').set('input','');
            }else
                document.changekeyword(1);">img.add4.png</rimg2>
                    <input click="document.inputButton();setTimeout(()=>{
                    document.showLast();
            },80);
            if(document.$('chatItem').val().length>0){
                document.$('chatItem').set('rimg2','img.send_email.png');
            }else{
                document.$('chatItem').set('rimg2','img.add4.png');
            }
            " watch="
            if(document.$('chatItem').val().length>0){
                document.$('chatItem').set('rimg2','img.send_email.png');
            }else{
                document.$('chatItem').set('rimg2','img.add4.png');
            }"/>
                    <button click="(file,second,document)=>{
                 ServerAgent.putFile({name:'amr',file:[file]},'Voice',(res)=>{
                        var data = { 'content': '语音',type:'voice',url:res.url,time:second+'秒'};
                        document.sendMessage(data);
                 });}">按住 说话</button>
                </chat>
                <face height="272" id="button1" itemClick="(document,res)=>{
            document.$('chatItem').insert(res);
        }" show="gone"/>
                <group background="#ffffff" btn="h136" height="272" id="button6" num="2,3" show="gone">
                    <button click="document.startCamera('psychology_photo').then((res)=>{
            ServerAgent.putFile({name:'image',file:[res]},'Images/temporary',(res)=>{
                    var data = {type:'image', 'content': '[图片]',image:res[0].url};
                    document.sendMessage(data);
                })
            });">
                        <img>img.caream.png</img>
                        <p>相机</p>
                    </button>
                    <button click="
            document.startAlbum(1,(document,lists)=>{
                ServerAgent.putFile({name:'image',file:lists},'Images/temporary',(res)=>{

                     console.log('aaaaaaaaa'+res);
                    var data = {'img': sp.get('img'), status:'image', type:'image','content': '[图片]', 'uid': sp.get('uid'),image:res[0].url};
                    document.sendMessage(data);
                })
            })">
                        <img>img.file.png</img>
                        <p>图片</p>
                    </button>
                    <button click="
                if(callLive.isLogin()){
                    callLive.call({nums:['callLive_'+document.arguments.otherUid],type:'video',info:{name:document.arguments.otherName,img:document.arguments.otherImg,myName:sp.get('nickname',''),myImg:sp.get('img','img.send_email.png')}});
                }else{
                    callLive.login(sp.get('callId',''),sp.get('userSig','')).then(res=>{
                        callLive.call({nums:['callLive_'+document.arguments.otherUid],type:'video',info:{name:document.arguments.otherName,img:document.arguments.otherImg,myName:sp.get('nickname',''),myImg:sp.get('img','img.send_email.png')}});
                    })
                }">
                        <img>img.icons_31.png</img>
                        <p>视频</p>
                    </button>
                    <button click="
                if(callLive.isLogin()){
                    callLive.call({nums:['callLive_'+document.arguments.otherUid],type:'audio',info:{name:document.arguments.otherName,img:document.arguments.otherImg,myName:sp.get('nickname',''),myImg:sp.get('img','img.send_email.png')}});
                }else{
                    callLive.login(sp.get('callId',''),sp.get('userSig','')).then(res=>{
                        callLive.call({nums:['callLive_'+document.arguments.otherUid],type:'audio',info:{name:document.arguments.otherName,img:document.arguments.otherImg,myName:sp.get('nickname',''),myImg:sp.get('img','img.send_email.png')}});
                    })
                }">
                        <img>img.icons_30.png</img>
                        <p>音频</p>
                    </button>
                </group>
                <script>
                    document.chatNaive = '';
                    document.setIntent(document.href);
                    document.chatListName = 'message_'+document.arguments.otherUid;
                    ServerAgent.invoke('chat',{uid:document.arguments.otherUid}).then((res)=>{
                        document.chatNaive = res.naive;
                        getAgent(res.naive).invoke('upload',{page:0}).then((res)=>{
                            document.setEmpty(true);
                            document.stop();
                            document.adapter('chat_list').refresh([]);
                            document.adapter('chat_list').upload(res);
                            document.showLast();
                        });
                    });
                    document.onPause(()=>{
                        media.release();
                    })
                </script>
                <script>
                    let voice = false;
                    let currentShow = -1;
                    let buttons = ['button1','button6'];
                    let imgs = ['rimg','rimg2'];
                    let imgsurl = ['img.key_word.png','img.key_word.png'];
                    let isShow = false;
                    document.onResume(()=>{
                        voice = false;
                        currentShow = -1;
                        isShow = true;
                        document.$('chatItem').set('rimg2','img.add4.png').set('rimg','img.smile2.png').set('limg','img.luyin.png');
                        document.$('button1').show('gone');
                        document.$('button6').show('gone');
                    });
                    document.changekeyword = function(id) {
                        if(voice) {
                            document.$('chatItem').init();
                            voice = false;
                        }
                        if(currentShow == id){
                            document.keyword.nothing();
                            document.$('chatItem').openKeyword();
                            setTimeout(()=>{
                                for (let i in buttons) {
                                    document.$(buttons[i]).show('gone');
                                }
                                document.keyword.resize();
                                document.showLast();
                            },50);
                            document.$('chatItem').init();
                            currentShow = -1;
                            isShow = true;
                            return;
                        }
                        for (let i in buttons) {
                            document.$(buttons[i]).show('gone');
                        }
                        if (currentShow != id){
                            document.$(buttons[id]).show();
                            currentShow = id;
                            document.$('chatItem').init();
                            if (id == 0)
                                document.$('chatItem').init(imgs[0],imgsurl[0]);
                        }
                        if (isShow){
                            document.keyword.nothing();
                            document.keyword.hide();
                            isShow = false;
                            setTimeout(()=>{document.keyword.resize();},50);
                        }
                        setTimeout(()=>{document.showLast()},70);
                    };
                    let first = true;
                    document.voiceButton = function(){
                        if (isShow){
                            document.keyword.hide();
                        }
                        if(first){
                            isShow = !isShow;
                            first = false;
                        };
                        if (currentShow != -1){
                            document.$(buttons[currentShow]).show('gone');
                        }
                        currentShow = -1;
                        isShow = !isShow;
                        voice = !voice;
                    };
                    document.inputButton = function(){
                        if(isShow)return;
                        document.keyword.nothing();
                        setTimeout(()=>{
                            document.keyword.resize();
                            if (currentShow != -1){
                                document.$(buttons[currentShow]).show('gone');
                                document.$('chatItem').init();
                            }
                            currentShow = -1;
                        },50);
                        isShow = true;
                    };
                    document.back((document)=>{
                        if(currentShow != -1){
                            document.$(buttons[currentShow]).show('gone')
                            currentShow = -1;
                            document.$('chatItem').init();
                            console.log('关闭加号');
                            return;
                        }
                        document.finish();
                    });
                </script>
                <script>
                    sp.put({chatWithUid:document.arguments.otherUid});
                    document.sendMessage = function(data){
                        if(document.chatNaive === ''){
                            return;
                        }
                        getAgent(document.chatNaive).invoke('sendMessage', data).then((res) => {
                            document.adapter('chat_list').load([res]);
                            document.toLast();
                        });
                    };
                </script>
            </footer>
        </listview>
    </xmp>
    <p>message-chat-big_image.xml</p>
    <xmp>
        <coordinator clip="#ffffff,1">
            <header/>
            <body background="#887b7b7b">
            <text margin="280,8,15,8" height="25" click="document.finish();">
                <rimg attr="25" >img.delete.png</rimg>
            </text>
            <img height="455" val="document.arguments.image"/>
            </body>
        </coordinator>
    </xmp>
</div>
<div id="detail-1">
    <h2>方法详解:</h2>
    <div class="detail">
        <img src="" alt="">
        <xmp>${代码}</xmp>
        <div>
            <p>${解释}</p>
        </div>
    </div>
</div>
</body>
</html>